<template>
    <div>
        <TitleBar class="absolute top-0 left-0 w-[828px]">事件管理</TitleBar>
        <div class="box_top">
            <div class="box_t_1">
                <div class="box_img"><img :src="require('./assets/img_1.png')" alt=""></div>
                <div class="text_1">非法入侵预警</div>
                <div class="text_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;小区西门人行通道</div>
                <div class="text_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>
                <div class="text_tag text_tag_1">进行中</div>
            </div>
            <div class="box_t_1 box_t_2">
                <div class="box_img"><img :src="require('./assets/img_1.png')" alt=""></div>
                <div class="text_1">高空抛物</div>
                <div class="text_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;小区西门人行通道</div>
                <div class="text_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>
                <div class="text_tag text_tag_2">未处理</div>
            </div>
        </div>
        <div class="box_top box_bottom">
            <div class="box_t_1 box_t_3">
                <div class="box_img"><img :src="require('./assets/img_1.png')" alt=""></div>
                <div class="text_1">高空抛物</div>
                <div class="text_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;小区西门人行通道</div>
                <div class="text_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>
                <div class="text_tag text_tag_2">未处理</div>
            </div>
            <div class="box_t_1 box_t_4">
                <div class="box_img"><img :src="require('./assets/img_1.png')" alt=""></div>
                <div class="text_1">消防占道</div>
                <div class="text_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;消防通道</div>
                <div class="text_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>
                <div class="text_tag text_tag_1">进行中</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'
export default defineComponent({
    components: {TitleBar}
})

</script>

<style scoped lang="scss">
    .box_top{
        color: #E0F7FF;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;
        display: flex;
        margin: 32px 0;
        >div{
            width: 50%;
            height: 90px;
            // border: 1px solid #ccc;
            position: relative;
        }
        .box_img{
            position: absolute;
            width: 160px;
            height: 90px;
            left: 54px;
        }
        .text_1{
            position: absolute;
            left: 238px;
            top: 4px;
            font-size: 16px;
        }
        .text_2{
            position: absolute;
            left: 238px;
            top: 40px;
            font-size: 12px;
            svg{
                fill: none !important; 
                font-size: 14px;
                transform: translateY(2px);
            }
        }
        .text_3{
            position: absolute;
            left: 238px;
            bottom: 4px;
            font-size: 12px;
             svg{
                fill: none !important; 
                font-size: 15px;
                transform: translateY(1px);
            }
        }
        .text_tag{
            position: absolute;
            left: 54px;
            width: 50px;
            height: 20px;
            border-radius: 0px 0px 8px 0px;
            color: #E0F7FF;
            font-size: 12px;
            line-height: 20px;
            padding: 0 7px;
        }
        .text_tag_1{
            background: linear-gradient(99.09deg, #5FA8F2 0%, #2F82D7 100%);
        }
        .text_tag_2{
            background: linear-gradient(99.09deg, #DDB260 0%, #D5A23F 100%);
        }

    }
    .box_bottom{
        display: flex;
        margin: 32px 0;
        >div{
            width: 50%;
            height: 90px;
            // border: 1px solid #ccc;
        }
    }
</style>